<script setup lang="ts" name="View3D">

onMounted(()=>{
	
})

</script>
<template>
	<div class="main-content view-3d">
		<div class="series">
			<Selector :activeIndex="activeIndex" :covers="props.covers" :loading="loading" @change="handleSeriesChanged" />
		</div>
		<div v-if="!isError" class="dom-cvs" ref="cvs3d"></div>
		<div v-else class="error">当前序列不支持3d视图</div>
	</div>
</template>
<style lang="scss">
  .main-content.view-3d{
width: 100%;
      height: calc(95vh - 150px);
      display: flex;
      flex-direction: row;

      .series {
          width: 110px;
          height: 100%;
      }

      .dom-cvs {
          flex: 1;
          height: 100%;
          background-color: #000;
      }

      .error {
          flex: 1;
          height: 100%;
          background-color: #000;
          line-height: 600px;
          text-align: center;
          color: #fff;
      }
  }
</style>
<style lang="scss" scoped></style>
